<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>FrozenUI Demo</title>
        <script type="text/javascript" src="http://tajs.qq.com/stats?sId=37342703" charset="UTF-8"></script>
        <link rel="stylesheet" href="../css/frozen.css">
        <link rel="stylesheet" href="demo.css">
        <script src="../lib/zepto.min.js"></script>
        <script src="../js/frozen.js"></script>
    </head>
    
    <body ontouchstart>
        <header class="ui-header ui-header-positive ui-border-b">
            <i class="ui-icon-return" onclick="history.back()"></i><h1>动画组件 cover</h1><button class="ui-btn">回首页</button>
        </header>
        <footer class="ui-footer ui-footer-btn">
            <ul class="ui-tiled ui-border-t">
                <li data-href="index.html" class="ui-border-r"><div>基础样式</div></li>
                <li data-href="ui.html" class="ui-border-r"><div>UI组件</div></li>
                <li data-href="js.html"><div>JS插件</div></li>
            </ul>
        </footer>
        <section class="ui-container">




<!--
配置信息可以通过js传参，也可以通过元素的`data-*`的方式。

配置信息也可以被trigger的`data-*`来重置。

具体配置信息如下：


<table>
    <tr>
        <th>name</th>
        <th>type</th>
        <th>default</th>
        <th>description</th>
    </tr>
    <tr>
        <td>trigger</td>
        <td>element</td>
        <td>null</td>
        <td>cover触发显示的元素。</td>
    </tr>
    <tr>
        <td>dismiss</td>
        <td>null</td>
        <td>null</td>
        <td>cover触发隐藏的元素。</td>
    </tr>
    <tr>
        <td>background</td>
        <td>string</td>
        <td>随机</td>
        <td>cover的背景色，可通过trigger的data-background配置重置。下同</td>
    </tr>
    <tr>
        <td>duration</td>
        <td>int</td>
        <td>1000</td>
        <td>动画耗时</td>
    </tr>
    <tr>
        <td>startPos</td>
        <td>string</td>
        <td>"source"</td>
        <td>
            <p>cover动画开始时的位置，默认为`source`（trigger的中心位置）。</p>
            <p>可选参数：source|top|center|bottom</p>
        </td>
    </tr>
    <tr>
        <td>offset</td>
        <td>Array</td>
        <td>[0,0]</td>
        <td>cover在startPos的基础上的偏移量。</td>
    </tr>
    <tr>
        <td>expandAxis</td>
        <td>string</td>
        <td>'x'</td>
        <td>cover扩展方向，可选 x|y|xy</td>
    </tr>
    <tr>
        <td>isFloat</td>
        <td>BOOL</td>
        <td>true</td>
        <td>触发元素是否保持在cover上方</td>
    </tr>
    <tr>
        <td>zIndex</td>
        <td>int</td>
        <td>999</td>
        <td>cover的z-index</td>
    </tr>
    <tr>
        <td>callback</td>
        <td>functon</td>
        <td>function(){}</td>
        <td>事件回调，有两个参数，第一个参数为事件类型，第二个参数为当前cover对象。</td>
    </tr>
</table>
-->
<style type="text/css">
    body{position: absolute;top:0px;left:0px;width: 100%;height:100%;}
    .ui-frozen-cover{overflow: hidden;position: absolute;top:0px;left:0px;width: 100%;height:100%;}
    .item{width:100%;height:25%;display: -webkit-box;-webkit-box-pack:center; -webkit-box-align:center}
    .close{position:fixed;top:10px;right:10px;display: block;width:50px;height:50px;color:#fff;border:#fff 1px solid; text-align: center;border-radius: 50px;line-height: 50px;display: none;z-index: 2000}
    .title{color:#fff;display: block;text-align: center;font-size: 24px;-webkit-transition:all .5s .3s;}
    .info{color:#fff;display: block;text-align: center;font-size: 12px;-webkit-transition:all .5s;top:50%;width:100%;top:50%;position: absolute;z-index: 2000;opacity: 0;-webkit-transform:translateY(50px);}
    .info.show{opacity: 1;-webkit-transform:translateY(0);}
</style>
<section id="cover">
    <div class="demo-item">
        <p class="demo-desc">辅助类</p>
        <div class="demo-block">
            <div class="ui-frozen-cover" id="cover" data-start-pos="source" data-trigger=".item" data-dismiss=".close">
                <div class="close" >关闭</div>
                <div class="item" style="background:#35a;" data-background="#35a">
                    <div class="title">网页重构</div>
                </div>
                <div class="item" style="background:#880;" data-background="#880">
                    <div class="title">前端开发</div>
                </div>
                <div class="item" style="background:#4a3;" data-background="#4a3">
                    <div class="title">交互设计</div>
                </div>
                <div class="item" style="background:#099;" data-background="#099">
                    <div class="title">视觉设计</div>
                </div>
            </div>
            <div class="text">
                <div class="info">
                    <p>全球最牛网页重构</p>
                </div>
                <div class="info">
                    <p>全球最牛前端开发</p>
                </div>
                <div class="info">
                    <p>全球最牛交互设计</p>
                </div>
                <div class="info">
                    <p>全球最牛视觉设计</p>
                </div>

            </div>
        </div>
        <script class="demo-script">
            ;(function (){
                $(".ui-frozen-cover").cover({
                    callback:function(type,obj){
                        switch(type){
                            case "show":
                                covershow(obj);
                                break;
                            case "hide":
                                coverhide(obj);
                                break;
                            case "hidden":
                                coverhidden(obj);
                                break;
                            case "shown":
                                covershown(obj);
                                break;
                        }

                    }
                });
                function covershow(cover){
                    if(!cover._isShown){
                        var title=cover.currentTrigger.find('.title'),
                                index=$(".item").index(cover.currentTrigger);

                        title.css({
                            '-webkit-transform':'translateY('+(cover.position.screenHeight/2-title.offset().top-30)+'px)'
                        });
                        $('.info').eq(index).css({
                            "-webkit-transition-delay":".5s"
                        })
                        $('.info').eq(index).addClass('show');
                    }
                }
                function coverhide(cover){
                    var title=cover.currentTrigger.find('.title'),
                            index=$(".item").index(cover.currentTrigger);

                    title.css({
                        '-webkit-transform':'translateY(0px)'
                    })
                    $('.info').eq(index).css({
                        "-webkit-transition-delay":"0s"
                    })
                    $('.info').eq(index).removeClass('show');
                }
                function covershown(cover){
                    $('.close').show();
                }
                function coverhidden(){
                    $('.close').hide();
                }
            })();
        </script>
    </div>
</section>


        </section><!-- /.ui-container-->
        <script>
        $('.ui-list li,.ui-tiled li').click(function(){
            if($(this).data('href')){
                location.href= $(this).data('href');
            }
        });
        $('.ui-header .ui-btn').click(function(){
            location.href= 'index.html';
        });
        </script>
    </body>
</html>